/**
 * 通讯录
 * 这个页面的代码拷贝address-book.js 还是比较原始的
 * @author levy
 * @date    2016/08/27
 * @signForription []
 */
(function( lf, r) {
    var ajax = lf.utils.ajax,
        pullRefresh = lf.utils.pullRefresh;

    var Person = r.createClass({

        getInitialState(){
            return({
                checked: false
            })
        },
       render:function(){
           var person = this.props.data,
               checkClass = this.state.checked ? 'check-box on-check' : 'check-box';

           return (
                   <li className="mui-left mui-table-view-cell" ref="link">
                       <label className="name">{person.name}</label>
                       <input className={checkClass} name="checkbox" value={person.custGlobalId} global={person.custGlobalId} type="checkbox" ref="check_box"/>
                   </li>
           );
       },
       componentDidMount: function () {

           var $link = React.findDOMNode(this.refs.link);

           var me = this;

           $($link).on('tap',function () {
               var state = me.state.checked;
               me.setState({
                   checked: !state,
               })

           })
       },
        componentDidUpdate(){
            var $choose = $('.on-check');
            // var idList = [];
            var custGlobalId = this.props.user.custGlobalId;

            let idList = $choose.map(e => {
                if($choose[e].value != custGlobalId) return $choose[e].value
            })

            console.log(idList.selector)

            let data = {
                custGlobalId: idList.selector || [] //map出来的数组多了个产数,
            }

            lf.appJs.sendChoose(data)
        }
    });

    var PersonList = React.createClass({

       render: function () {
           var me = this;
           var persons = this.props.data.map(function(person,index){
               // console.log(person)
               //log(person.phone)
               return (
                   <Person data={person} key={index} checkedEnd={me.saveChoose} user={me.props.user} />
               );
           });

           return (
               <ul className="mui-table-view">
                   {persons}
               </ul>
           );
       }
    });

    //按部门分组
    var Group = React.createClass({
        render: function () {
            var data = this.props.data,
                staffList = data.staffList,
                style = staffList.length > 0 ? 'block;' : 'none;';

            return (
                <div style={{display: style}}>
                    <div className="group">
                        {data.departmentName}
                    </div>
                    <div>
                        <PersonList data={staffList} user={this.props.user}/>
                    </div>
                </div>
            );
        }
    });

	var Body = React.createClass({
        getInitialState:function(){
            return ({addressBook:[]})
        },
        getAddressBook(userInfo) {
            var me = this;
            ajax({
                data: {
                    staffId: userInfo.id,
                    size: 999,
                },
                success:function(data){
                    var list = data.dataList.map(function(data,index){
                        return <Group data={data} key={index} user={me.props.user}/>
                    });
                    this.setState({addressBook:list});
                }.bind(this),
                error: function (xhr, errorType, error) {
                    alert('请刷新重试');
                }
            },lf.api.addressBook);
        },
        componentWillMount:function(){
                this.getAddressBook(this.props.user);
                lf.appJs.refresh(this.getAddressBook);

                let data = {custGlobalId:[]}
                lf.appJs.sendChoose(data)
        },
        componentDidMount: function () {
            var callback = function () {
                setTimeout(function () {
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
                    location.reload()
                },1000);
            };

            pullRefresh({container: '#pullrefresh', callback: callback});
        },
		render: function () {
            return (
            <div id="pullrefresh" className="mui-content mui-scroll-wrapper">
                <div className="mui-scroll">
                    <div className="address-book">
                        {this.state.addressBook}
                    </div>
                </div>
            </div>
            );
		}
	});

    lf.bridgeJs.getUser(function (user) {
        console.log(user)
        r.render(
            <Body user={user} />,
            document.getElementById('root'), function () {

            }
        )
    })

})( liefeng, React);
